<template>
  <div class="GMOP-add-model">
    <slot name="footer">
      <div class="GMOP-add-model__left">
        <FIButton @click="addRowCancel">取消</FIButton>
        <FIButton v-if="!saveBtn" type="primary" @click="addRowSave">保存</FIButton>
        <FIButton v-else type="primary" :id="saveBtn" customType @click="addRowSave">保存</FIButton>
      </div>
    </slot>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, computed, watch } from 'vue'
import { useSystemStore } from '@/stores/system'
import { storeToRefs } from 'pinia'

const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  // 表格修改新增保存按钮id
  saveBtn: {
    type: String,
    default: '',
  },
})
const systemStore = useSystemStore()
const { isMenuCollapsed } = storeToRefs(systemStore)

const emits = defineEmits(['cancel', 'save', 'update:visible'])

const addRowCancel = () => {
  // emits('update:visible', false)
  emits('cancel')
}
const addRowSave = () => {
  emits('save')
}
</script>
<style lang="less" scoped>
.GMOP-add-model {
  position: fixed;
  width: 100%;
  width: calc(100% - 200px);
  bottom: 0;
  left: 200px;
  // margin-left: -24px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  align-items: center;
  height: 64px;
  background: #ffffff;
  box-shadow: 4px -1px 12px 0px rgba(0, 0, 0, 0.08);
  z-index: 999;
  justify-content: flex-end;
}
.GMOP-add-model-long {
  width: calc(100% - 60px);
  left: 60px;
}
.GMOP-add-model__left {
  // display: flex;
  // justify-content: flex-end;
  span {
    margin: 0 5px;
    color: var(--el-color-primary);
  }
}
</style>
